<div ng-controller="StateRules">
  <md-card class="oppia-editor-card-with-avatar">
    <div class="oppia-editor-card-body">
      <div ng-repeat="(handlerName, handler) in interactionHandlers">
        <div>
          <ul class="nav nav-stacked nav-pills" role="tablist" ui-sortable="RULE_LIST_SORTABLE_OPTIONS" ng-model="handler">
            <!-- An HTML element marked ui-sortable should contain only one element,
            and this element should have an ng-repeat defined on it. See the
            ui-sortable documentation for more details. -->
            <!-- Note that adding "track by $index" here seems to mess up the final
            index in the stop() event handler. -->
            <li ng-repeat="rule in handler" ng-class="{'active': activeRuleIndex === $index}" class="oppia-rule-block oppia-sortable-rule-block" ng-if="!$last" style="margin-top: 0;">
              <span class="oppia-rule-sort-handle" ng-if="!$last && handler.length > 2">
                <img src="/images/general/drag_dots.png" width="10">
              </span>
              <a ng-click="changeActiveRuleIndex($index)" href="#" class="oppia-rule-tab protractor-test-rule-tab" ng-class="{'oppia-rule-tab-active': activeRuleIndex === $index}">
                <div style="overflow: hidden; padding-left: 26px; text-overflow: ellipsis; white-space: nowrap; width: 520px;">
                  <span ng-if="getCurrentInteractionId() !== 'MultipleChoiceInput'">
                    <[rule | parameterizeRuleDescription:getCurrentInteractionId():answerChoices]>...
                  </span>
                  <span ng-if="getCurrentInteractionId() === 'MultipleChoiceInput'">
                    <span angular-html-bind="rule | parameterizeRuleDescription:getCurrentInteractionId():answerChoices"></span>...
                  </span>
                </div>
              </a>

              <div ng-if="activeRuleIndex === $index && isActiveRuleEditorShown">
                <div class="oppia-editor-card-section">
                  <div class="oppia-rule-body-container">
                    <rule-editor rule="rule" save-rule="saveActiveRule(rule)" delete-rule="deleteActiveRule()" is-editable="editabilityService.isEditable()" class="protractor-test-rule-body">
                    </rule-editor>
                  </div>
                </div>
              </div>
            </li>

            <li ng-if="isDefaultRuleTabShown()"
                ng-class="{'active': activeRuleIndex === handler.length - 1}" class="oppia-rule-block" style="border-bottom: 1px solid #ccc; margin-top: 0;">
              <a ng-click="changeActiveRuleIndex(handler.length - 1)" href="#" class="oppia-rule-tab oppia-default-rule-tab protractor-test-default-rule-tab" ng-class="{'oppia-rule-tab-active': activeRuleIndex == handler.length - 1}">
                <span style="padding-left: 24px;">
                  <span ng-if="getCurrentInteractionId() === 'Continue'">
                    When the button is clicked...
                  </span>
                  <span ng-if="getCurrentInteractionId() !== 'Continue'">
                    None of the other rules apply...
                  </span>
                </span>
              </a>

              <div ng-if="activeRuleIndex === handler.length - 1 && isActiveRuleEditorShown">
                <div class="oppia-editor-card-section">
                  <div class="oppia-rule-body-container">
                    <rule-editor rule="handler[handler.length - 1]" save-rule="saveActiveRule(handler[handler.length - 1])" delete-rule="deleteActiveRule()" is-editable="editabilityService.isEditable()" class="protractor-test-rule-body">
                    </rule-editor>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </md-card>
  <md-card style="margin: 20px 0px; padding: 0px;">
    <div ng-if="editabilityService.isEditableOutsideTutorialMode() && (getCurrentInteractionId() !== 'Continue' || !isDefaultRuleTabShown())" class="oppia-add-rule-button-container">
      <button type="button" class="btn btn-default btn-lg oppia-add-rule-button protractor-test-open-add-rule-modal" ng-click="openAddRuleModal()">
        + Add Rule
      </button>
    </div>
  </md-card>
</div>

<script type="text/ng-template" id="modals/addRule">
  <div class="modal-header">
    <h3>Add Rule</h3>
  </div>

  <div class="modal-body">
    <form name="addRuleForm.ruleDetailsForm" class="form-inline protractor-test-add-rule-details">
      <rule-details-editor rule="tmpRule" can-add-default-rule="canAddDefaultRule">
      </rule-details-editor>
    </form>
  </div>

  <div class="modal-footer">
    <button class="btn btn-default" ng-click="cancel()">Cancel</button>
    <button class="btn btn-success protractor-test-add-new-rule" ng-click="addNewRule()" ng-disabled="addRuleForm.ruleDetailsForm.$invalid || isRuleEmpty(tmpRule)">Add New Rule</button>
  </div>
</script>
